<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-input v-model="searchName" style="width: 200px;margin-right: 10px;" placeholder="请输入企业名称" clearable />
      <el-input v-model="searchName1" style="width: 200px;margin-right: 10px;" placeholder="请输入岗位名称" clearable />
      <el-input v-model="searchName2" style="width: 200px;margin-right: 10px;" placeholder="请输入员工名称" clearable />
      <el-button type="primary" @click="list()">查询</el-button>
      <el-button  @click="removeList()">清空</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="entId" label="企业ID" width="70"></el-table-column>
        <el-table-column prop="entName" label="企业名称" width="120"></el-table-column>
        <el-table-column prop="entPhone" label="企业电话" width="120"></el-table-column>
        <el-table-column prop="entAddr" label="企业地址" width="130"></el-table-column> 
        <el-table-column prop="jobSalary" label="薪资范围" width="150"></el-table-column> 
        <el-table-column prop="jobTitle" label="岗位名称" width="150"></el-table-column>
        <el-table-column prop="entPartner" label="是否合作企业" >
            <template #default="{ row }">
                <span>{{ row.entPartner ? '是' : '否' }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="staffId" label="员工ID" width="70"></el-table-column>
        <el-table-column prop="staffName" label="姓名" width="100"></el-table-column>
        <el-table-column prop="created" label="创建时间" width="170"></el-table-column>
    </el-table>
    <!-- 添加弹窗 -->
    <el-dialog v-model="showAddForm" title="添加" width="50%">

    </el-dialog>



    <!-- 分页 -->
    <!-- layout:里面的值的顺序就是页面显示顺序 -->
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
        :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElMessage, ElMessageBox } from 'element-plus';
import { EntJobListApi } from '@/api/ent-api';

const tableData = ref([{entId: '1',entName: '华为', entPhone: '12345678901', entAddr: '中国', jobSalary: '5k-10k',jobTitle: 'java开发',entPartner: '是',staffId: '1',staffName: '张三',created: '2024-01-01'}]);

//分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(10)
const size = ref('default')

// 搜索条件
const searchName = ref('');
const searchName1 = ref('');
const searchName2 = ref('');


// 弹窗
const showAddForm = ref(false);
// 清空信息
const removeList = async () => {
  searchName.value = '';
  searchName1.value = '';
  searchName2.value = '';

  currentPage.value = 1;
  pageSize.value = 10;
  list();
};
// 查询列表
const list = async () => {
   // 分页模糊查询参数
   const response = await EntJobListApi({ page: currentPage.value, size: pageSize.value, entName: searchName.value ,jobTitle: searchName1.value,staffName: searchName2.value });
  console.log('查询列表', response);
  if (response.code === 200) {
    tableData.value = response.data.list;
    total.value = response.data.total;
  } else {
    ElMessage.error('查询失败');
  }
};


// 格式化时间的方法  去掉T
const formatTime = (time: string) => {
  if (!time) return '';
  return time.replace('T', ' ');
}

// 处理每页显示条数变化的事件
const handleSizeChange = (newPageSize: number) => {
  pageSize.value = newPageSize;
  list();
};
// 处理当前页码变化的事件
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  list();
};

// 页面加载完后，加载默认数据
onMounted(() => {
  list();
});
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  row
  if (rowIndex%2 === 0) {
    return 'success-row'
  }
  return ''
}
</script>
  
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
